/*
* @Date: 2020/4/24
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import './index.scss';

class A extends React.Component {
  render() {
    const { className = '' } = this.props;
    return (
      <div className={className}>
        <div>11111</div>
        <div>22222</div>
      </div>
    )
  }
}

const dom = (
  <div className="bbb">
    <A className="user" />
    <div>
      222222
    </div>
  </div>
)

function reactDomToSource(reactDom) {
  if (!reactDom) {
    return null;
  }
  if (!reactDom.props) {
    return <SourceDom type={reactDom.type} />
  }
  if (!!!reactDom.props.children) {
    return <SourceDom type={reactDom.type} props={reactDom.props} />
  }
  if (Object.prototype.toString.call(reactDom.props.children) === '[object String]') {
    return <SourceDom type={reactDom.type} props={reactDom.props}>{reactDom.props.children}</SourceDom>
  }
  if (Object.prototype.toString.call(reactDom.props.children) === '[object Array]') {
    let doms = [];
    for (let i = 0; i < reactDom.props.children.length; i++) {
      doms.push(reactDomToSource(reactDom.props.children[i]));
    }
    return <SourceDom type={reactDom.type} props={reactDom.props}>{doms}</SourceDom>;
  }
  return <SourceDom type={reactDom.type} props={reactDom.props}>{reactDomToSource(reactDom.props.children)}</SourceDom>;
}

class SourceDom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: true,
    };
  }
  render() {
    const { children, type, props = {} } = this.props;
    const { isOpen } = this.state;
    const doms = [];
    for (let key in props) {
      if (key === 'children' || key === 'prefixCls') {
        continue;
      }
      if (typeof props[key] === 'function') {
        console.log(props[key].toString())
        let funcName = /^function\s+([a-zA-Z]+[a-zA-Z0-9_]*)\s*\(/.exec(props[key].toString());
        let funcContent = /^function\s+[a-zA-Z]+[a-zA-Z0-9_]*\s*\([^\{]*\)\s*\{([\s\S]*)\}$/.exec(props[key].toString());
        let funcArgs = /^function\s+[a-zA-Z]+[a-zA-Z0-9_]*\s*\(([^\)]*)\)/.exec(props[key].toString());
        console.log('funcName', funcName, funcArgs)
        if (!!funcName) {
          if (funcName[1] === key) {
            doms.push(
              <div style={{marginLeft: '10px'}}>
                <div>{key}=</div>
                <div>
                  ({funcArgs[1]}) =&gt;{`{${funcContent[1]}}`}
                </div>
              </div>
            )
          } else {
            doms.push(
              <div style={{marginLeft: '10px'}}>
                <div>{key}=</div>
                <div>{`{this.${funcName}`}</div>
              </div>
            )
          }
        }
      } else if (Object.prototype.toString.call(props[key]) === '[object Array]' ) {
        doms.push(
          <div style={{marginLeft: '10px'}}>
            <div>{key}=</div>
            <div>{JSON.stringify(props[key])}</div>
          </div>
        )
        // 数组
      } else if (Object.prototype.toString.call(props[key]) === '[object Object]') {
        // 对象
        doms.push(
          <div style={{marginLeft: '10px'}}>
            <div>{key}=</div>
            <div>
              {`{${JSON.stringify(props[key])}}`}
            </div>
          </div>
        )

      } else if (Object.prototype.toString.call(props[key] === '[object String]')) {
        // 字符串
        doms.push(
          <div style={{display: 'flex', alignItem: 'center',marginLeft: '10px'}}>
            <div>{key}=</div>
            <div>{`"${props[key]}"`}</div>
          </div>
        )
      }
    }
    let domFlag = '';
    if (typeof type === 'function') {
      let funcName = /^function\s+([a-zA-Z]+[a-zA-Z0-9_]*)\s*\(/.exec(type.toString());
      domFlag = funcName[1].trim();
    } else if (typeof type === 'string') {
      domFlag = type;
    }
    console.log('domFlag', domFlag);
    if (domFlag === '') {
      return <React.Fragment>{children}</React.Fragment>;
    }
    return (
      <React.Fragment>
        {
          isOpen && (
            <div className="react-dom-open">
              {
                !!children && <span className="reat-dom-open-icon" onClick={()=>this.setState({isOpen: false})}>-</span>
              }

              <div style={{display: 'flex', alignItem: 'center', lineHeight: '14px', margin: '12px 0'}}>
                <div style={{marginRight: doms.length > 0 ? '14px' : 0}}>&lt;{domFlag}</div>
                {doms}
                <div>{ !!!children && '/' }&gt;</div>
              </div>
              <div style={{paddingLeft: '24px'}}>
                { children }
              </div>
              {
                !!children && (
                  <div style={{margin: '12px 0'}}>
                    &lt;/{domFlag}&gt;
                  </div>
                )
              }

            </div>
          )
        }
        {
          !isOpen && (
            <div className="react-dom-close">
              {
                !!children && <span className="reat-dom-close-icon" onClick={()=>this.setState({isOpen: true})}>+</span>
              }

              <div style={{display: 'flex', alignItem: 'center', lineHeight: '14px', margin: '12px 0'}}>
                <div style={{marginRight: doms.length > 0 ? '14px' : 0}}>&lt;{domFlag}</div>
                {doms}
                <div>{ !!children && '/' }&gt;</div>
              </div>
            </div>
          )
        }
      </React.Fragment>

    );
  }
}

export default class extends React.Component {

  render() {
    const { dom } = this.props;
    return (
      <React.Fragment>
        {
          reactDomToSource(dom)
        }
      </React.Fragment>

    )
  }
}
